<script setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import {
	addHolidayException,
	allCourseList,
	deleteHoliday,
	exceptionRequestList,
	getHoliday,
	todayCourseList,
} from '@/api/home'
import { showConfirmDialog, showNotify } from 'vant'
import router from '@/router'

const pass = require('../image/tg.png') // 通过
const failPass = require('../image/btg.png') // 不通过
const exceptionDesc = ref('') // 异常说明
const activeIndex = ref(0)
const list = ref([])
// const database64 = ref('')
const holidayList = ref([])
const dateShow = ref(false)
const dateField = ref(false)

const titleList = ref([
	{
		title: '今日课程',
		url: require('../image/jrkc.png'),
	},
	{
		title: '请假',
		url: require('../image/qj.png'),
	},
	{
		title: '异常申请',
		url: require('../image/ycsq.png'),
	},
])
const holiday = ref({
	courseList: [],
	statusList: [
		{
			text: '全部',
			value: '',
		},
		{
			text: '未办理',
			value: 0,
		},
		{
			text: '通过',
			value: 100,
		},
		{
			text: '未通过',
			value: 1,
		},
	],
	typeList: [
		{
			text: '全部',
			value: '',
		},
		{
			text: '事假',
			value: '事假',
		},
		{
			text: '病假',
			value: '病假',
		},
	],
})
const queryParam = ref({
	courseNo: '',
	status: '',
	type: '',
	startDate: '',
	endDate: '',
	typeId: 0,
})
const exceptionList = ref([])
const exception = ref({
	courseList: [],
	statusList: [
		{
			text: '全部',
			value: '',
		},
		{
			text: '早退',
			value: 12,
		},
		{
			text: '缺卡',
			value: 46,
		},
		{
			text: '迟到',
			value: 11,
		},
	],
})
const expQueryParam = ref({
	courseNo: '',
	status: '',
	type: '',
	startDate: '',
	endDate: '',
	typeId: 1,
})

const infoData = () => {
	list.value = []
	todayCourseList().then((res) => {
		if (res) {
			res.data.forEach((el) => {
				if (el.attend === 1) {
					if (el.attendStatus === 0) {
						el.attendTitle = '上课打卡'
					} else if (el.attendStatus === 3) {
						el.attendTitle = '缺卡'
					} else if (el.attendStatus === 1) {
						el.attendTitle = '迟到'
					} else {
						el.attendTitle = '正常打卡'
					}
				} else {
					el.attendTitle = '上课打卡'
				}

				if (el.finish === 1) {
					if (el.finishStatus === 0) {
						el.finishTitle = '下课打卡'
					} else if (el.finishStatus === 3) {
						el.finishTitle = '缺卡'
					} else if (el.finishStatus === 1) {
						el.finishTitle = '早退'
					} else {
						el.finishTitle = '正常打卡'
					}
				} else {
					el.finishTitle = '下课打卡'
				}
			})
			list.value = res.data
		}
	})
}

// 随机背景色
const randomBackground = () => {
	const num = Math.floor(Math.random() * 3)
	return num === 0 ? '#E4F5DC' : num === 1 ? '#FFEBEB' : '#F6F2D0'
}

const tabDay = (i) => {
	activeIndex.value = i
	localStorage.setItem('home-item', i)
	if (i === 0) {
		infoData()
	}
}

// 打卡
const checkIn = (item, id, type) => {
	if (type === 1) return false
}

//选择时间 确认
const chooseDate = (value) => {
	console.log('dateField', dateField.value)
	console.log('value', value)
	if (activeIndex.value === 1) {
		queryParam.value[dateField.value] = dayjs(value.selectedValues).format('YYYY-MM-DD')
		getHolidayList()
	}
	if (activeIndex.value === 2) {
		expQueryParam.value[dateField.value] = dayjs(value.selectedValues).format('YYYY-MM-DD')
		getExceptionList()
	}
	cancelDate()
}
//时间选择关闭
const cancelDate = () => {
	dateShow.value = false
}
//打开时间选择
const pickDate = (item) => {
	dateField.value = item
	dateShow.value = true
}

//请假申请撤回
const cancelHoliday = (id) => {
	//撤回
	showConfirmDialog({
		message: '是否确认撤回？',
	})
		.then(() => {
			//调删除接口
			deleteHoliday({
				id: id,
			}).then((res) => {
				if (res.code === 200) {
					showNotify({
						type: 'success',
						message: res.message,
						duration: 1000,
					})
					getHolidayList()
				}
			})
		})
		.catch(() => {
			// on cancel
		})
}

//请假申请修改 跳转
const updateHoliday = (item) => {
	toAddHolidayPage(item)
}

//请假申请添加
const addHoliday = () => {
	router.replace({
		path: '/addHoliday',
	})
}

const toAddHolidayPage = (item) => {
	router.replace({
		path: '/addHoliday',
		query: {
			holiday: item,
		},
	})
}

const getHolidayParam = () => {
	list.value = []
	holiday.value.courseList = []
	exception.value.courseList = []
	allCourseList().then((res) => {
		res.data.forEach((el) => {
			let param = {
				text: el.courseName,
				value: el.courseNo,
			}
			holiday.value.courseList.push(param)

			let paramExp = {
				text: el.courseName,
				value: el.id,
			}
			exception.value.courseList.push(paramExp)
		})
		queryParam.value.courseNo = holiday.value.courseList[0].value
		expQueryParam.value.courseNo = exception.value.courseList[0].value
		getHolidayList()
		getExceptionList()
	})
}

const getHolidayList = () => {
	getHoliday(queryParam.value).then((res) => {
		res.data.forEach((e) => {
			e.createTime = dayjs(e.createTime).format('YYYY-MM-DD')
		})
		holidayList.value = res.data
	})
}

const getExceptionList = () => {
	exceptionRequestList(expQueryParam.value).then((res) => {
		res.data.forEach((e) => {
			e.attendsTime = dayjs(e.attendsTime).format('HH:mm:ss')
		})
		exceptionList.value = res.data
	})
}

//提交申请
const onSubmit = (item) => {
	// let form = JSON.stringify(item);
	if (!item.reason) {
		showNotify({
			type: 'warning',
			message: '申请说明不能为空',
			duration: 1000,
		})
		return
	}
	let param = {
		proId: item.attendsId,
		reason: item.reason,
		courseName: item.courseName,
		courseNo: item.courseNo,
		classNo: item.classNo,
		auditTeacher: item.teacher,
		startTime: item.startTime,
		endTime: item.endTime,
		leaveType: item.type === 8 ? '上课' : '下课',
	}

	addHolidayException(param).then((res) => {
		if (res) {
			getExceptionList()
			exceptionDesc.value = ''
		}
	})
}

//异常说明 弹窗打开
const writeReason = (value) => {
	exceptionDesc.value = value
}

//异常说明 弹窗关闭
const cancelWrite = () => {
	exceptionDesc.value = ''
}
onMounted(() => {
	let dataIndex = +localStorage.getItem('home-item')
	tabDay(dataIndex ? dataIndex : 0) // 页面刷新后，默认显示第一个tab
	infoData()
	getHolidayParam()
})

/* upFile(typeId, courseId, settingId) {
  singIn({
    courseId: courseId,
    typeId: typeId,
    file: database64.value,
    settingId: settingId,
  })
    .then(() => {
      window.localStorage.setItem('database64', database64.value)
      router.push({
        path: '/faceRecognition',
      })
    })
    .catch((err) => {
      // console.log("定位失败err", err);
      router.push({
        path: '/faceRecognition',
        query: {
          err: err,
        },
      })
    })
}, */
</script>

<template>
	<div class="pages">
		<p class="title">智能考勤管理系统学生端</p>
		<div class="content">
			<!-- 顶部菜单 start -->
			<div class="menu">
				<div
					class="row"
					v-for="(item, index) in titleList"
					:key="index"
					:class="index === activeIndex ? 'active' : ''"
					@click="tabDay(index)"
				>
					<img :src="item.url" alt="" />
					<div>{{ item.title }}</div>
				</div>
			</div>
			<!-- 顶部菜单 end -->
			<!-- 今日课程 start -->
			<div v-if="activeIndex === 0" class="day-work">
				<div
					v-for="(item, index) in list"
					:key="index"
					class="row"
					:style="{ background: randomBackground() }"
				>
					<div class="classname">{{ item.courseName }}</div>
					<div class="classData">
						<p class="classTime">{{ item.startTime }}-{{ item.endTime }}</p>
						<p class="classLocation">{{ item.address }}</p>
						<div class="submit">
							<div
								class="attendClass"
								:class="item.attend !== 0 ? 'attendClass-disabled' : ''"
								@click="checkIn(item, 8, item.attend)"
							>
								{{ item.attendTitle }}
							</div>
							<div
								class="getOutOfClass"
								:class="item.finish !== 0 ? 'getOutOfClass-disabled' : ''"
								@click="checkIn(item, 9, item.finish)"
							>
								{{ item.finishTitle }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 今日课程 end -->
			<!-- 请假 start -->
			<div v-if="activeIndex === 1" class="holiday">
				<div>
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="queryParam.courseNo"
							:options="holiday.courseList"
							@change="getHolidayList"
						/>
						<van-dropdown-item
							v-model="queryParam.status"
							:options="holiday.statusList"
							@change="getHolidayList"
						/>
						<van-dropdown-item
							v-model="queryParam.type"
							:options="holiday.typeList"
							@change="getHolidayList"
						/>
					</van-dropdown-menu>
				</div>

				<div class="date">
					<van-cell-group class="date-picker" style="display: flex">
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="queryParam.startDate"
							@click="pickDate('startDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
						<span style="line-height: 50px">至</span>
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="queryParam.endDate"
							@click="pickDate('endDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
					</van-cell-group>
				</div>
				<div>
					<van-date-picker
						@confirm="chooseDate"
						@cancel="cancelDate"
						v-if="dateShow"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
					/>
				</div>

				<div>
					<div v-for="(item, index) in holidayList" :key="index">
						<div class="holiday-item">
							<img v-if="+item.status !== 0" :src="+item.status === 100 ? pass : failPass" alt="" />
							<p class="holiday-item-title">{{ item.courseName }}</p>
							<p class="holiday-item-title">
								{{ item.createTime }}&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
							</p>
							<p class="holiday-item-content">{{ item.reason }}</p>
							<p class="holiday-item-content">{{ item.leaveType }}</p>
							<div class="holiday-item-button">
								<van-button
									:disabled="+item.status !== 0"
									round
									size="large"
									style="margin-right: 10px"
									type="success"
									@click="cancelHoliday(item.holidayId)"
									>撤回
								</van-button>
								<van-button
									:disabled="+item.status !== 0"
									round
									style="margin-left: 10px"
									size="large"
									type="primary"
									@click="updateHoliday(JSON.stringify(item))"
									>修改
								</van-button>
							</div>
						</div>
					</div>
					<div style="background-color: #ffffff">
						<van-button round style="margin-top: 20px" block type="default" @click="addHoliday"
							>新增请假
						</van-button>
					</div>
				</div>
			</div>
			<!-- 请假 end -->
			<!-- 异常处理 start -->
			<div v-if="activeIndex === 2" class="holiday">
				<div>
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="expQueryParam.courseNo"
							:options="exception.courseList"
							@change="getExceptionList"
						/>
						<van-dropdown-item
							v-model="expQueryParam.status"
							:options="exception.statusList"
							@change="getExceptionList"
						/>
					</van-dropdown-menu>
				</div>

				<div class="date">
					<van-cell-group class="date-picker" style="display: flex">
						<!-- 开始时间 -->
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="expQueryParam.startDate"
							@click="pickDate('startDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
						<span style="line-height: 50px">至</span>
						<!-- 结束时间 -->
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="expQueryParam.endDate"
							@click="pickDate('endDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
					</van-cell-group>
				</div>
				<div>
					<van-date-picker
						@confirm="chooseDate"
						@cancel="cancelDate"
						v-if="dateShow"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
					/>
				</div>

				<div>
					<div v-for="(item, index) in exceptionList" :key="index">
						<div class="holiday-item">
							<img
								v-if="+item.status && +item.status !== 0"
								:src="+item.status === 100 ? pass : failPass"
								alt=""
							/>
							<p class="holiday-item-title">{{ item.courseName }}</p>
							<p class="holiday-item-title">
								{{ item.createTime }}({{ item.dayOfWeek }})&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{
									item.endTime
								}}
							</p>
							<p class="holiday-item-content">
								<span>{{ +item.typeId === 8 ? '上课打卡时间' : '下课打卡时间' }}</span
								>&nbsp;: &nbsp;&nbsp;{{ item.attendsTime || '--' }}
							</p>
							<p class="holiday-item-content">
								考勤状态&nbsp;: &nbsp;&nbsp;{{
									+item.statusId === 11 ? '迟到' : +item.statusId === 12 ? '早退' : '缺卡'
								}}
							</p>
							<div v-if="!+item.status" class="holiday-item-button">
								<van-button
									round
									size="large"
									style="margin-right: 10px"
									type="success"
									@click="writeReason(+item.attendsId)"
									>说明申请
								</van-button>
							</div>
							<div v-if="+item.status">申请说明&nbsp;:&nbsp;&nbsp;{{ item.reason }}</div>
							<div v-if="exceptionDesc === +item.attendsId">
								<van-cell-group>
									<van-field
										v-model="item.reason"
										style="border: 1px solid #dddddd; margin-top: 30px"
										rows="4"
										autosize
										type="textarea"
										maxlength="100"
										placeholder="异常情况说明"
										show-word-limit
									/>
								</van-cell-group>
								<div class="holiday-item-button">
									<van-button
										round
										size="large"
										style="margin-right: 10px"
										type="success"
										@click="cancelWrite"
										>取消
									</van-button>
									<van-button
										round
										style="margin-left: 10px"
										size="large"
										type="primary"
										@click="onSubmit(item)"
										>提交
									</van-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 异常处理 end -->
		</div>
	</div>
</template>

<style scoped lang="scss">
:root {
	--van-button-large-height: 20px;
}

.pages {
	padding-bottom: 34px;
	box-sizing: border-box;

	& > .title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', sans-serif;
		font-weight: 400;
		color: #ffffff;
		letter-spacing: 1px;
		text-shadow: 0 4px 8px #1e96e1;
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;

		.menu {
			display: flex;
			justify-content: space-between;

			& > div {
				width: 175px;
				height: 175px;
				background: #ddf0ff;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 28px;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-weight: 600;
				color: #4690c0;

				& > img {
					width: 80px;
					height: 80px;
					margin-bottom: 10px;
				}

				&.active {
					background: #ffffff;
					color: #000000;
				}
			}
		}

		.day-work {
			margin-top: 40px;
			background: #ffffff;
			border-radius: 16px 16px 16px 16px;
			width: 100%;
			/* padding: 24px 28px; */
			box-sizing: border-box;

			.row {
				min-height: 320px;
				/* background: #f6f2d0; */
				border-radius: 16px;
				padding: 22px 50px 30px;
				box-sizing: border-box;
				margin-bottom: 20px;

				.classname {
					font-size: 28px;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-weight: 500;
					color: #000000;
					margin-bottom: 20px;
				}

				.classData {
					width: 586px;
					min-height: 220px;
					background: #ffffff;
					border-radius: 20px;
					padding: 30px 48px 24px;
					box-sizing: border-box;

					.classTime {
						text-align: center;
						font-size: 32px;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-weight: 600;
						color: #000000;
						margin-bottom: 16px;
					}

					.classLocation {
						font-size: 24px;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-weight: 400;
						color: #666666;
						margin-bottom: 34px;
						text-align: center;
					}

					.submit {
						display: flex;
						justify-content: space-between;

						div {
							width: 212px;
							height: 60px;
							border-radius: 30px;
							font-size: 28px;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-weight: 600;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.attendClass {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
						}

						.attendClass-disabled {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
							opacity: 0.39;
						}

						.getOutOfClass {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
						}

						.getOutOfClass-disabled {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
							opacity: 0.39;
						}
					}
				}
			}
		}

		.holiday {
			margin-top: 40px;

			.date {
				margin-top: 40px;
			}

			.date-picker {
				display: flex;
				justify-items: center;
			}

			.holiday-item {
				margin-top: 30px;
				position: relative;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 8px;
				padding: 30px;

				& > img {
					width: 150px;
					height: 150px;
					position: absolute;
					right: 0;
					top: 0;
				}

				.holiday-item-title {
					font-size: 35px;
					font-weight: 600;
					text-align: left;
					line-height: 45px;
				}

				.holiday-item-content {
					line-height: 45px;
					color: rgba(153, 153, 153, 1);
				}

				.holiday-item-button {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
